<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>BHUDY - 用户管理</title>
    <script src="/res/js/bhudy.js"></script>
    <script src="/res/layui/layui.js"></script>
</head>
<body>
<div class="layui-fluid">
    <div class="layui-row">
        <div class="layui-col-xs12">
            <form class="layui-form" action="">
                <div class="layui-form-item">
                    <label class="layui-form-label">名称</label>
                    <div class="layui-input-inline">
                        <input type="text" name="loginCode" lay-verify="loginCode" autocomplete="off" placeholder="请输入名称"
                               class="layui-input">
                    </div>
                    <label class="layui-form-label">使用人</label>
                    <div class="layui-input-inline">
                        <input type="text" name="sysPersonalId" lay-verify="sysPersonalId" autocomplete="off" placeholder="请输入使用人"
                               class="layui-input">
                    </div>
                    <div class="layui-inline">
                        <button type="submit" class="layui-btn layui-btn-normal" lay-submit="" lay-filter="search">搜索
                        </button>
                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                        <button type="button" class="layui-btn layui-btn-primary" onclick="javascript:location.reload();">刷新</button>
                    </div>
                </div>
            </form>
            <table id="tableDataList" class="layui-table" lay-filter="tableDataList"
                   lay-data="{url:'/api/v1/sysUsers', page:true, id:'tableDataList',toolbar:'default', defaultToolbar:['filter', 'exports', 'print']}">
                <thead>
                <tr>
                    <th lay-data="{type:'checkbox', fixed: 'left'}"></th>
                    <th lay-data="{field:'userId', width:80, sort: true, fixed: 'left'}">userId</th>
                    <th lay-data="{field: 'loginCode', width:150}">loginCode</th>
                    <th lay-data="{field: 'userName', width:150}">userName</th>
                    <th lay-data="{field: 'password', width:150}">password</th>
                    <th lay-data="{field: 'sysPersonalId', width:150}">sysPersonalId</th>
                    <th lay-data="{field: 'email', width:150}">email</th>
                    <th lay-data="{field: 'mobile', width:150}">mobile</th>
                    <th lay-data="{field: 'sex', width:150}">sex</th>
                    <th lay-data="{field: 'salt', width:150}">salt</th>
                    <th lay-data="{field: 'avatar', width:150}">avatar</th>
                    <th lay-data="{field: 'sign', width:150}">sign</th>
                    <th lay-data="{field: 'wxOpenid', width:150}">wxOpenid</th>
                    <th lay-data="{field: 'mobileImei', width:150}">mobileImei</th>
                    <th lay-data="{field: 'pwdSecurityLevel', width:150}">pwdSecurityLevel</th>
                    <th lay-data="{field: 'pwdUpdateDate', width:150}">pwdUpdateDate</th>
                    <th lay-data="{field: 'lastLoginIp', width:150}">lastLoginIp</th>
                    <th lay-data="{field: 'lastLoginDate', width:150}">lastLoginDate</th>
                    <th lay-data="{field: 'freezeDate', width:150}">freezeDate</th>
                    <th lay-data="{field: 'freezeCause', width:150}">freezeCause</th>
                    <th lay-data="{field: 'status', width:150}">status</th>
                    <th lay-data="{field: 'remark', width:150}">remark</th>
                    <th lay-data="{field: 'updateDate', width:150}">updateDate</th>
                    <th lay-data="{field: 'updateBy', width:150}">updateBy</th>
                    <th lay-data="{field: 'createDate', width:150}">createDate</th>
                    <th lay-data="{field: 'createBy', width:150}">createBy</th>
                    <th lay-data="{fixed: 'right', width:178, align:'center', toolbar: '#barDemo'}"></th>
                </tr>
                </thead>
            </table>

            <script type="text/html" id="barDemo">
                <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="configure">配置</a>
                <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
                <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
            </script>
        </div>
    </div>
</div>
</body>
<script>
    layui.use(['table', 'form', 'layedit', 'laydate', 'transfer', 'layer', 'util'], function () {
        var table = layui.table,
            form = layui.form,
            layer = layui.layer,
            transfer = layui.transfer,
            util = layui.util,
            $ = layui.jquery,
            superUserId = 0,
            url = "/api/v1/sysUser";

        //监听头工具栏事件
        table.on('toolbar(tableDataList)', function (obj) {
            var checkStatus = table.checkStatus(obj.config.id),
                dataList = checkStatus.data; //获取选中的数据
            switch (obj.event) {
                case 'add':
                    showUpdateOrCreate();
                    break;
                case 'update':
                    if (dataList.length === 0) {
                        layer.msg('请选择一行');
                    } else if (dataList.length > 1) {
                        layer.msg('只能同时编辑一个');
                    } else {
                        showUpdateOrCreate(dataList[0]);
                    }
                    break;
                case 'delete':
                    if (dataList.length === 0) {
                        layer.msg('请选择一行');
                    } else {
                        var userIds = [];
                        dataList.forEach(data => {
                            userIds.push(data.userId);
                        });
                        //layer.alert('删除 [id]：' + userIds);
                        delFun(userIds);
                    }
                    break;
            }
            ;
        });

        //监听行工具事件
        table.on('tool(tableDataList)', function (obj) {
            var data = obj.data;
            console.log(obj.data)
            if (obj.event === 'del') {
                delFun([data.userId]);
            } else if (obj.event === 'edit') {
                showUpdateOrCreate(data)
            } else if (obj.event === 'configure') {
                configure(obj.data.userId);
            }
        });

        // 搜索框
        form.on('submit(search)', function (data) {
            table.reload("tableDataList", {
                where: data.field,
                page: {curr: 1}//重新从第 1 页开始
            });
            return false;
        });

        // 修改或者添加方法
        form.on('submit(updateOrCreateBtn)', function (data) {
            if (data.field.userId) {
                $.ajaxJsonPUT(url, JSON.stringify(data.field), function (resultData) {
                    resultFun(resultData);
                })
            } else {
                $.ajaxJsonPOST(url, JSON.stringify(data.field), function (resultData) {
                    resultFun(resultData);
                })
            }
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });


        // 删除方法
        function delFun(ids) {
            layer.confirm('真的删除行么', function (index) {
                $.ajaxJsonDEL(url + "s", JSON.stringify(ids), function (resultData) {
                    layer.msg(resultData.message);
                    setTimeout(function () {
                        layer.closeAll();
                        table.reload("tableDataList", {
                            where: null,
                            page: {curr: 1}//重新从第 1 页开始
                        });
                    }, 2000);
                });
            });
        }

        // 拿到后台返回结果做处理
        function resultFun(resultData) {
            layer.msg(resultData.message);
            if (resultData.code === 0) {
                setTimeout(function () {
                    layer.closeAll();
                    table.reload("tableDataList", {
                        where: null,
                        page: {curr: 1}//重新从第 1 页开始
                    });
                }, 2000);
            }
        }

        // 显示修改或者添加弹出窗口
        function showUpdateOrCreate(data) {
            //页面层-自定义
            let index = layer.open({
                type: 1,
                title: '操作窗口',
                closeBtn: 1,
                skin: 'layui-layer-lan',
                maxmin: true,
                btn: ['提交', '取消'],
                yes: function (index, layero) {
                    $("#updateOrCreateBtn").click();
                    return false;
                },
                content: `<form class="layui-form" style="margin: 10px 50px;" action="" lay-filter="updateOrCreateForm">
                            <input type="hidden" name="userId" lay-verify="userId" autocomplete="off" class="layui-input">
                            <div class="layui-form-item">
                                <label class="layui-form-label">loginCode</label>
                                <div class="layui-input-block">
                                    <input type="text" name="loginCode" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">userName</label>
                                <div class="layui-input-block">
                                    <input type="text" name="userName" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">password</label>
                                <div class="layui-input-block">
                                    <input type="text" name="password" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">sysPersonalId</label>
                                <div class="layui-input-block">
                                    <input type="text" name="sysPersonalId" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">email</label>
                                <div class="layui-input-block">
                                    <input type="text" name="email" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">mobile</label>
                                <div class="layui-input-block">
                                    <input type="text" name="mobile" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">sex</label>
                                <div class="layui-input-block">
                                    <input type="text" name="sex" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">salt</label>
                                <div class="layui-input-block">
                                    <input type="text" name="salt" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">avatar</label>
                                <div class="layui-input-block">
                                    <input type="text" name="avatar" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">sign</label>
                                <div class="layui-input-block">
                                    <input type="text" name="sign" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">wxOpenid</label>
                                <div class="layui-input-block">
                                    <input type="text" name="wxOpenid" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">pwdSecurityLevel</label>
                                <div class="layui-input-block">
                                    <input type="text" name="pwdSecurityLevel" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">pwdUpdateDate</label>
                                <div class="layui-input-block">
                                    <input type="text" name="pwdUpdateDate" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">lastLoginIp</label>
                                <div class="layui-input-block">
                                    <input type="text" name="lastLoginIp" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">lastLoginDate</label>
                                <div class="layui-input-block">
                                    <input type="text" name="lastLoginDate" autocomplete="off" class="layui-input">
                                </div>
                            </div><div class="layui-form-item">
                                <label class="layui-form-label">freezeDate</label>
                                <div class="layui-input-block">
                                    <input type="text" name="freezeDate" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">freezeCause</label>
                                <div class="layui-input-block">
                                    <input type="text" name="freezeCause" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">status</label>
                                <div class="layui-input-block">
                                    <input type="text" name="status" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">remark</label>
                                <div class="layui-input-block">
                                    <input type="text" name="remark" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <button type="submit" style="display: none;" id="updateOrCreateBtn" class="layui-btn layui-btn-normal" lay-submit="" lay-filter="updateOrCreateBtn"></button>
                        </form>`
            });
            layer.full(index);
            // 绑定数据
            form.val('updateOrCreateForm', data);
        }

        function configure(userId) {
            superUserId = userId;
            $.getJSON("/api/v1/sysRoleAndUsers", `userId=${userId}`, function (resultData) {
                let transferDataList = [];
                $.each(resultData.data.sysRoles, function (i, obj) {
                    let transferData = {
                        "value": obj.roleId,
                        "title": obj.roleName,
                        "roleId": obj.roleId,
                        "userId": userId
                    };
                    transferDataList.push(transferData)
                });

                let userIds = [];
                $.each(resultData.data.sysUsers, function (i, obj) {
                    userIds.push(obj.roleId)
                });

                layer.open({
                    type: 1,
                    title: '操作窗口',
                    closeBtn: 1,
                    skin: 'layui-layer-lan',
                    maxmin: true,
                    btn: ['提交', '取消'],
                    yes: function (index, layero) {
                        var sysRolesTransferData = transfer.getData('sysRolesTransfer'); //获取右侧数据
                        $.ajaxJsonPOST(`/api/v1/sysUserRoles?userId=${userId}`, JSON.stringify(sysRolesTransferData), function (resultData) {
                            resultFun(resultData);
                        });

                        return false;
                    },
                    content: `<div id="sysRolesTransfer" class="demo-transfer"></div>`
                });

                //初始右侧数据
                transfer.render({
                    elem: '#sysRolesTransfer'
                    , data: transferDataList
                    , value: userIds
                    , id: 'sysRolesTransfer'
                })
                /*layer.full(index);*/
            });
        }
    });
</script>
</html>